<style>
.el-table tr.has_old>td.el-table__cell {
  background-color: var(--el-color-success-light-3) !important;
}
.el-table tr.has_old.cover>td.el-table__cell {
  background-color: var(--el-color-error-light-3) !important;
}
</style>
<style scoped>
.hr-tips{color: var(--el-color-error);line-height: 1.4;}
</style>
<template>
  <forms ref="forms" :config="config" @submit:forms="onsubmit" :btns="btns">
    <template #input_file>
      <div class="flex">
        <el-button @click="$refs.input_file.click()">上传文件</el-button>
        <p>{{file_name}}</p>
      </div>
      <input ref="input_file" type="file" name="file" style="display: none;" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" @change="onchange">
    </template>
    <template #hr>
      <div class="hr-tips" >
        <p>以下是选择需要导入的数据，有背景色的表示当前数据库已经有相似存在的数据：</p>
        <p>绿色背景为新增导入(不影响相似的数据)</p>
        <p>红色背景为覆盖导入(修改相似的数据)</p>
      </div>
    </template>
    <template #data_list="{row}">
      <input type="hidden" :name="row.name" :value="row.value" />
      <list class="max" :data="row.list" :cols="list_cols"
            :has_select="true" :row_class="row_class"
            @select:list="onselect($event,row)" >
        <template #radio_switch_edit="{row,col}">
          <radio_switch v-if="row._old_id_>0" v-model:value="row._cover_" config="新增|0,覆盖|1"></radio_switch>
          <p v-else>新增</p>
        </template>
      </list>
    </template>
  </forms>
</template>

<script>
import s94Mjs from "s94-js";
import {iframe} from "@/js/tool.js";
import {ajax} from "@/js/api_tool.js";
import {_href, param_encode} from "@/js/s94_tool.js";
import list from "@/components/list.vue";
import Radio_switch from "@/components/auto_import/UnifyParam/radio_switch.vue";

export default {
  components: {Radio_switch, list},
  props: ['__iframe'],
  data(){
    let id = this.$get('id'), btns = {
      '导入_primary':()=>{
        this.onsubmit();
      }
    };
    let forms_config = {
      input_file: {name:'file', label:'数据包', type:'input_file', value:'', tips:'json文件'},
      hr: {name:'', label:'', type:'hr', value:'', tips:''},
    }

    if (this.$get('is_info')){
      s94Mjs.each(forms_config, function (row){ row.is_info = true; });
      btns = [];
    }
    return {
      id: id,
      btns: btns,
      config: forms_config,

      file_name: '',
      list_cols: [
        {name:'id', label:'ID', width:'60px'},
        {name:'title', label:'标题', min_width:'200px'},
        {name:'_old_id_', label:'已存在ID', width:'60px'},
        {name:'cover', label:'处理方式', type:'radio_switch_edit', width:'80px', fixed:'right'},
      ],

      table_list: [], //记录数据表列表，需要这个顺序
      select_data_map: {}
    }
  },
  methods: {
    onselect(select_list, row){
      this.select_data_map[row.table] = select_list;
    },
      row_class({row}){
      if (row._old_id_>0){
        return row._cover_==1 ? 'has_old cover' : 'has_old';
      }
      return '';
    },
    onsubmit(){
      let import_list = [];
      this.table_list.forEach(table=>{
        let select = this.select_data_map[table];
        if (select){
          import_list.push({
            table,
            list: select,
          })
        }
      })
      ajax({
        url: '/admin/db_data/import',
        method: 'post',
        headers: {'content-type': 'application/json'},
        data: {import_list},
      }, res=>{
        if (this.__iframe){
          iframe.hide('/db_data/edit');
        }
      })
    },
    initAfter(export_list){
      Object.keys(this.config).forEach(k=>{
        if (!~['input_file','hr'].indexOf(k)) delete this.config[k];
      });
      this.table_list = [];
      this.select_data_map = {}
      export_list.forEach((item)=>{
        this.table_list.push(item.table);
        this.select_data_map[item.table] = [];
        this.config[item.table] = Object.assign(item, {
          name:`select_map[${item.table}]`, label:item.label, type:'data_list', value:'', tips:''
        });
      })

    },
    onchange(e){
      let url = '/admin/db_data/import_init';
      let data = new FormData();
      let file = e.target.files[0];
      data.append('file', file);
      ajax({url, method: 'POST', data}, res=>{
        this.file_name = file.name;
        this.initAfter(res.data);
      })
    }
  },
  watch: {
    'config._table_list_.value'(val, oldVal){
      let showTables = val?val.split(','):[];
      Object.keys(this.config).forEach(key=>{
        if (key === '_table_list_') return false;
        this.config[key].remove = !~showTables.indexOf(key);
      })
    }
  },
  mounted() {
    let app = this;
    if (!this.__iframe) window['app'] = this;
    if (this.id) {
    }

    //其他初始化操作
  }
}
</script>
